<!DOCTYPE html>
<html>
<head>
<style>
	body { font-family:consolas; }
	table { table-layout:fixed; width:120px; }
	td { background:wheat; }
</style>
</head>
<body>
<table id="table1" cellspacing="0" cellpadding="0">
	<tr>
		<td id="td11" style="width:30px; border:5px solid plum;">A</td>
		<td id="td12" style="width:90px; border:5px solid coral;">B</td>
	</tr>
</table>
<div id="info1"></div>
<br />
<table id="table2" cellspacing="0" cellpadding="0">
	<tr>
		<td id="td21" style="width:30px; border:5px solid plum;">A</td>
		<td id="td22" style="width:70px; border:5px solid coral;">B</td>
	</tr>
</table>
<div id="info2"></div>
<br />
<table id="table3" cellspacing="0" cellpadding="0">
	<tr>
		<td id="td31" style="width:30px; border:5px solid plum;">A</td>
		<td id="td32" style="width:50px; border:5px solid coral;">B</td>
	</tr>
</table>
<div id="info3"></div>
<script>
	function $(id) { return document.getElementById(id); }
	var w11 = $("td11").clientWidth, 
		w12 = $("td12").clientWidth, 
		w21 = $("td21").clientWidth, 
		w22 = $("td22").clientWidth, 
		w31 = $("td31").clientWidth, 
		w32 = $("td32").clientWidth, 
		wt1 = $("table1").offsetWidth,
		wt2 = $("table2").offsetWidth;
		wt3 = $("table3").offsetWidth;
	$("info1").innerHTML = "A:30/" + w11 + ", B:90/" + w12 + ", TABLE:120/" + wt1;
	$("info2").innerHTML = "A:30/" + w21 + ", B:70/" + w22 + ", TABLE:120/" + wt2;
	$("info3").innerHTML = "A:30/" + w31 + ", B:50/" + w32 + ", TABLE:120/" + wt3;
</script>
</body>
</html>
